#{extends 'main.html' /}
#{set title:'Topics' /}

<div class="series_tab">
<div class="series_title">${series?.name}</div>
<div class="series_follow">
#{if user?.follows?.contains(series)}
	<img src="@{'/public/images/remove_icon.png'}" width="14" height="14" border="0" style="vertical-align:middle;" /> 
	<a href="/s/${series?.id}/unfollow">Unfollow</a>
#{/if}
#{else}
<img src="@{'/public/images/plus_icon.gif'}" width="14" height="14" border="0" style="vertical-align:middle;" /> 
    <a href="/s/${series?.id}/follow">Follow</a>
#{/else}
</div>
<div class="series_follow">
	<img src="@{'/public/images/facebookShareIcon.png'}" width="14" height="14" border="0" style="vertical-align:middle;" />
	<a href=""  onclick="postToFeed('${series?.name} @ TV World', 'http://54.246.83.207:9007${series?.poster}', '${user?.name} follows ${series?.name}', '${series?.name} @ TV World', 'http://apps.facebook.com/cengdoi-gg/s/${series?.id}',''); return false;">Share</a>
</div>
</div>

<div class="clear" style="height: 10px;"></div>

<div class="series_menu">
<a href="/s/${series?.id}" class="series_menu_a">Details</a> 
<a href="/s/${series?.id}/topics" class="series_menu_a_active">Topics</a> 
<a href="/s/${series?.id}/videos" class="series_menu_a">Videos</a> 
<a href="/s/${series?.id}/episodes" class="series_menu_a">Episodes</a>
</div>

<div class="clear" style="height: 10px;"></div>

<div class="series_tab">

	<div class="topic_user_image">
		<img src="${topic?.user?.profilPicture}?type=large" width="100" alt="${topic?.user?.name}" style="border: 2px solid #59983B; border-radius: 5px;" />
		<div style="font-size: 12px; color: #333; font-family: 'Open Sans','Lucida Grande', helvetica;">${topic?.user?.name}</div>
	</div>
	
	<div class="topic_header">
		<div class="topic_name">
			${topic?.topicName}
		</div>
		
		<div class="topic_date">
			${topic?.getFormattedDate()}
		</div>
	</div>
	
	<div class="topic_content">
		${topic?.content}
	</div>
			
</div>

<div class="clear" style="height: 20px;"></div>

<fieldset class="comment_fieldset" style="width: 698px">
<legend class="legend_style">Comments</legend>
	<div class="comment_list">
	#{paginate.list items:paginator, as:'comm'}
	<div class="comments">
	<div class="show_user_comment_pic"><img src="${comm?.getUser()?.profilPicture}" width="30" height="30" border="0" /></div>
	
	<div class="show_user_comment">${comm?.getUser()?.name}:</div>
	
	<div class="show_comment">
	
	#{if comm.comment.startsWith("<spoiler>") && comm.comment.endsWith("</spoiler>")}
	<div class="spoiler">
    <input type="button" onclick="showSpoiler(this);" value="Show/Hide Spoiler" />
    <div class="inner" style="display:none;">
	${comm?.comment.replaceAll("<[^>]*>", "")}
	</div>
	</div>
	#{/if}
	
	#{else}
	${comm?.comment}
	#{/else}
	
	</div>
	
	#{if user?.comments?.contains(comm)}
	<div class="delete-comment">
	<a class="delete-comment-button" href="/s/${series?.id}/topicdetail/${topic?.id}/dc/${comm?.id}"></a>
	</div>
	#{/if}
	
	</div>
	<br />
	#{/paginate.list} 
	#{paginate.controls items:paginator /}
	</div>
</fieldset>


<div class="clear" style="height: 20px;"></div>
	
#{ifErrors}
   <p class="errorleft">
        Field are required!
   </p>
   <div class="clear" style="height: 20px;"></div>
#{/ifErrors}
	
<div class="series_tab">	
<div class="series_title" style="text-align:left; width: 100%;">Post a comment</div>
 
<div style="text-align:left; width: 100%;">
#{form @Series.postCommentToTopic(series.id, topic.id)}

    <textarea name="comment" id="comment" style="border: 1px solid #59983B;"></textarea><br />
    <input type="submit" value="Submit your comment!" class="button_border" />
    
#{/form}
    <button onclick="ModifySelection ()" class="button_border">Add Spoiler Tag</button>
</div>
</div>

